<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <body>
    <div class="definicion">

      <g:form action="save" method="post" autocomplete="off" name="definicion">
        <input type="hidden" name="eOc" value="${eOc}"/>
        <input type="text" id="id" name="id" value="" disabled class="disabled" style="display:none; "/>  
        <table width="300" align="center">
          <tbody>
            <tr class="prop">
              <td width="200" valign="top" class="value ${hasErrors(bean: alumnoInstance, field: 'alumno', 'errors')}">
                  <g:textField  type="text" class="" name="alumno" value="" id="alumnos" onKeyPress="${remoteFunction(action: 'reder1',
                  update: [success: 'divRender1',
                    failure: 'ohno'],
                  params: '\'alumno=\' + this.value')}" style="width:200px" class="campos" />
              </td>
            </tr>
            <tr>
              <td>
                <g:select name="materia"
                    from="${materiaList}"
                    value="" class="campos" style="width:200px"
                    optionKey="id"  
                    optionValue="nombre"
                    noSelection="${['':'Todas las materias']}"
                    onChange="${remoteFunction(action: 'reder1',
                    update: [success: 'divRender1',
                    failure: 'ohno'],
                    params:'\'materia=\'+escape(this.value)+\'&alumno=\'+document.getElementById(\'alumnos\').value' )}"
                  />
              </td>
            </tr>
          </tbody>
        </table>
        <div id="divRender1" >
        </div>
      </g:form>
    </div>
    <script>
      jQuery(function() {
        jQuery("#alumnos").autocomplete({
          minLength: 0,
          source: ${alumnos},
          focus: function( event, ui ) {
                  jQuery( "#alumnos" ).val( ui.item.label );
                  return false;
          },
          select: function( event, ui ) {
                  jQuery( "#alumnos" ).val( ui.item.label );
                  jQuery( "#alumnos-id" ).val( ui.item.value );
                  jQuery( "#alumnos-description" ).html( ui.item.desc );
                  return false;
          }}).data( "autocomplete" )._renderItem = function( ul, item ) {
                    return jQuery( "<li></li>" )
                            .data( "item.autocomplete", item )
                            .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
                            .appendTo( ul );
          };
        });
    </script>
  </body>
</html>